<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一隅立画</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<!-- <link rel="stylesheet" type="text/css" href="./css/base.css"/> -->
		<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<link rel="stylesheet" type="text/css" href="./css/basestyle.css" />
		<script src="js/head.js" type="text/javascript"></script>
		<script src="js/xshead.js" type="text/javascript"></script>
		<script src="js/base.js"></script>
	</head>
	<body style="background-color: #f2f3f5;">
		<div id="content">
			<div class="container">
				<div class="row">
					<div id="subject" class="col-lg-8 col-md-8">
						<div ref="popupjiazai" style="display: none;">
							<div class="">
								<div class="banner swiper-container">
									<div class="swiper-wrapper">
										<div class="swiper-slide" v-for="(ad,index) in adlist" :key="index">
											<div class="guanggao" @click="openadsdetail(index,ad.id,ad.adstype)">
												<img  :src="ad.image">
											</div>
										</div>
										<div class="swiper-slide" v-for="(aduser,index) in aduserlist">
											<div class="guanggao" @click="openadsdetail(index,aduser.sheji_competition_id,aduser.adstype)">
												<img  :src="aduser.image">
											</div>
										</div>
									</div>
									<!-- 如果需要分页器 -->
									<div class="swiper-pagination paging"></div>
								</div>
							</div>
							<!-- 当前竞赛标题 -->
							<div class="nowrace">
								<div class="newracetitle">
									<p v-show="languagestatus == 2">Current competition</p>
									<p v-show="languagestatus == 1">当前竞赛</p>
								</div>
								<div class="newracemore">
									<div class="newracemoretxt">
										<a href="jingsaicenter.html">
											<p v-show="languagestatus == 2">See more</p>
											<p v-show="languagestatus == 1">查看更多</p>
										</a>
									</div>
									<div class="newracemoreimg">
										<img class="newracemorenav" src="./images/more.png">
									</div>
									<div class="clear"></div>
								</div>
								<div class="clear"></div>
							</div>
							<!-- 当前竞赛内容 -->
							<div class="nowracecontent" style="padding-left: 0;padding-right: 0;">
								<div class="empty" v-if="racelist.length == 0">
									<img src="./images/empty.png">
								</div>
								<div class="nowracecontentitem col-lg-6 col-md-6 col-xs-6" v-else v-for="(race,index) in racelist" :key="index"
								 @click="openracedetail(race.id)">
									<div class="nowracecontentitemup">
										<div class="nowracecontentitemupimg">
											<img class="nowracecontentworks" :src="race.image">
										</div>
										<div class="shoucang" @click.stop="changeLike(index,race.id,race.collstatus)">
											<img v-show="race.collstatus == 0" src="./images/weishoucnag.png">
											<img v-show="race.collstatus == 1" src="./images/yishoucang.png">
										</div>
									</div>
									<div class="nowracecontentitemdown">
										<div class="shejiitemtitle">
											<p>{{race.title}}</p>
										</div>
										<div class="shejiitemstatue">
											<div class="shejiitemstatuele">
												<p v-show="languagestatus == 2">deadline</p>
												<p v-show="languagestatus == 1">截止时间:</p>
												<p>{{race.endtime}}</p>
											</div>
											<div class="shejiitemstatueri">
												<div class="shejiitemstatueriimg">
													<img v-show="race.keep == 0" src="./images/jingsai_bg.png">
													<img v-show="race.keep == 1" src="./images/jingsai_bg_end.png">
													<div class="shejiitemstatueritxt">
														<p v-if="race.keep == 1" v-show="languagestatus == 1">已结束</p>
														<p v-else v-show="languagestatus == 1">进行中</p>
														<p v-if="race.keep == 1" v-show="languagestatus == 2">over</p>
														<p v-else v-show="languagestatus == 2">have in hand</p>
													</div>
												</div>
											</div>
										</div>
										<div class="shejiitemworker">
											<div class="shejiitemworkerpeo">
												<div class="shejiitemworkerpeoimg">
													<img :src="race.avatar">
												</div>
												<div class="shejiitemworkerpeoname">
													<p>{{race.nickname}}</p>
												</div>
											</div>
											<div class="shejiitemworkermoney">
												<p>¥</p>
												<p>{{race.money}}</p>
											</div>
										</div>
									</div>
								</div>

								<div class="clear"></div>
							</div>
							<div>
								<div class="judgepopup" v-show="tanchuang == 1">
									<div class="judgepopupnav">
										<div class="judgepopupwarp">
											<div class="judgepopupwarpup">
												<img src="./images/revoke_logo.png">
											</div>
											<div class="judgepopupwarpdown">
												<div class="judgepopupwarptxt">
													<p v-show="languagestatus == 1">您还未登录，请先登录在进行收藏吧!</p>
													<p v-show="languagestatus == 2">You haven't logged in yet, please log in to collect first!</p>
												</div>
												<div class="judgepopupwarpbtn">
													<div class="judgepopupwarpbtnitem judgepopupwarpbtnactive" @click="closetipopup">
														<p v-show="languagestatus == 1">好的</p>
														<p v-show="languagestatus == 2">OK</p>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 左边栏 -->
					<div id="worksider" class="col-lg-4 col-md-4">
						<script src="js/worksidebar.js" type="text/javascript"></script>
					</div>
				</div>
			</div>
		</div>

		<script src="js/pcFooter.js" type="text/javascript"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
		<!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
		<!-- <script src="babel.min.js"></script> -->
		<script type="text/javascript">

			// 主体
			var mySwiper;
			let subject = new Vue({
				el: '#subject',
				data:{
					isShow:true,
					bgimage:'',
					adlist: [],
					aduserlist: [],
					racelist: [],
					userid:'',
					token:'',
					tanchuang:0,
					languagestatus:'',
				},
				created:function() {
					if (sessionStorage.getItem('languagestatus')) {
						let languagestatus = sessionStorage.getItem('languagestatus')
						this.languagestatus = languagestatus
					}
				},
				mounted:function() {
					let that = this
					that.getadlist()
					if (localStorage.getItem('logininfo')) {
						console.log('isdfksjdf sd')
						let obj = JSON.parse(localStorage.getItem('logininfo'));
						that.userid = obj.userid
						that.token = obj.token
					}
					
					that.getList()
					that.openadsdetail()
					setTimeout(function(){
						that.$refs.popupjiazai.style.display = 'block'
					},200)

				},
				methods: {
					// 时间转换
					add0:function(m) {
						return m < 10 ? '0' + m : m
					},
					getLocalTime:function(nS) {
						let time = new Date(parseInt(nS) * 1000);
						var y = time.getFullYear();
						var m = time.getMonth() + 1;
						var d = time.getDate();
						var h = time.getHours();
						var mm = time.getMinutes();
						var s = time.getSeconds();
						return y + '/' + this.add0(m) + '/' + this.add0(d) + ' ' + this.add0(h) + ':' + this.add0(mm);
					},
					// 跳转
					openracedetail: function(id) {
						let that = this
						axios.get('http://127.0.0.1:8080/api/bishe.competition/views', {
							params: {
								userid: that.userid,
								token: that.token,
								id: id
							}
						})
						.then((res) => {
							window.location.href = 'jingsaidetail.html?id='+id
							console.log(id)
						})
					},
					// 收藏
					changeLike: function(i, id, type) {
						let that = this
						let list = that.racelist
						if (type == 1) {
							type = 0
						} else if (type == 0) {
							type = 1
						}
						axios.get('http://127.0.0.1:8080/api/bishe.competition/collection', {
								params: {
									userid: that.userid,
									token: that.token,
									id: id,
									type: type
								},
							})
							.then((res) => {
								console.log(res)
								if(res.data.code == 1) {
									list.forEach((item, index) => {
										if (index == i && item.collstatus == 1) {
											item.collstatus = 0
										} else if (index == i && item.collstatus == 0) {
											item.collstatus = 1
										}
									})
									that.racelist = list
								}else if(res.data.code == 2){
									that.tanchuang = 1
								}
							})
					},
					// 竞赛列表
					getList: function() {
						let that = this
						axios.get('http://127.0.0.1:8080/api/bishe.index/index', {
								params: {
									userid: that.userid,
									token: that.token,
								},
							})
							.then((res) => {
								if (res.data.code == 1) {
									let list = res.data.data.competition
									that.racelist = res.data.data.competition
									
									list.forEach((race, index) => {
										race.endtime = that.getLocalTime(race.endtime)
									})
								}
							})

					},
					// 轮播图
					getadlist: function() {
						let that = this
						axios.get('http://127.0.0.1:8080/api/bishe.index/homeads', {

							})
							.then((res) => {
								console.log(res)
								if(res.data.code == 1){
									that.adlist = res.data.data.homeads
									that.aduserlist = res.data.data.userads
									that.$nextTick(function() {
										
										mySwiper = new Swiper('.swiper-container', {
											direction: 'horizontal',
											loop: true,
											// 如果需要分页器
											pagination: '.swiper-pagination',
											autoplay: 2000,
											// speed: 300,
											// autoplay: {
											// 	delay: 1000,
											// 	disableOnInteraction: false,
											// },
											observer: true,
											observeParents: true, //必须加入
											observeSlideChildren:true,
										})
									})
								}
							})
					},
					// 轮播图详情
					openadsdetail: function(i, id, adstype) {
						let that = this
						if (adstype == 1) {
							window.location.href = 'jingsaidetail.html?id='+id

						} else if (adstype == 0) {
							window.location.href = 'bannerdetail.html?id='+id+'&adstype='+0
						}
					},
					// 关闭提示
					closetipopup:function(){
						this.tanchuang = 0
					},
					// 解决图片变形
					// ResizeImage(){
					// 	if (image.className == "Thumbnail"){
					// 			w = image.width;
					// 			h = image.height;
					// 		if( w == 0 || h == 0 ){
					// 			image.width = maxwidth;
					// 			image.height = maxheight;
					// 		} else if (w > h){
					// 			if (w > maxwidth) image.width = maxwidth;
					// 			}else{
					// 			if (h > maxheight) image.height = maxheight;
					// 			}
					// 	image.className = "ScaledThumbnail";
					// 	}
					// }
				},
			})



		</script>
	</body>
</html>
